<template>
    <div class="person">
        <h1>中国</h1>
        <h2 ref="title">北京</h2>
        <button @click="show">点我输出h2这个元素</button>
    </div>
</template>

<!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script setup name="Person">
    import {ref} from 'vue'

    // 创建一个title，用于存储ref标记的内容
    let title = ref()

    function show() {
        console.log(title.value)
    }

    let name = ref('张三')
    let age = ref(18)
    // 使用defineExpose将组件中的数据交给外部
    defineExpose({name, age})
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 5px;
    }

    li {
        font-size: 20px;
    }
</style>